<template>
  <div class="box" :style="{ 'padding-top': statusBarHeight }">
    <!-- <div class="title" :style="{ height: statusBarHeight,top:statusBarHeight }">
      活动详情{{ statusBarHeight }}
    </div>
    <div class="btn">按钮</div> -->
    <div class="swiper">
      <div class="swiper-box">
        <div class="swiper-item" v-for="(item, index) in list" :key="index">
          {{ index }}
        </div>
      </div>
      <div class="left btn1">prev</div>
      <div class="right btn1">next</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      statusBarHeight: "36px",
      list: Array.from({ length: 5 }, () => 0),
      current: 0,
    };
  },
  methods: {
    clickTitle(title) {
      window.uni.postMessage({
        data: {
          title,
        },
      });
    },
    initSwiper() {
      const oBox = document.querySelector(".swiper-box");
      const oNext = document.querySelector(".right");
      const oPrev = document.querySelector(".left");
      oPrev.addEventListener("click", () => {
        this.current--;
        // 左移
        console.log(this.current);
        if (Math.abs(this.current) == this.list.length) this.current = 0;
        oBox.style.transform = `translateX(${this.current}00%)`;
      });
      oNext.addEventListener("click", () => {
        this.current++;
        console.log(this.current)
        if (this.current == 0) this.current = (this.list.length-1)*-1;
        oBox.style.transform = `translateX(${this.current}00%)`;
      });
    },
  },
  mounted() {
    window.addEventListener('beforeunload',(e)=>{
      console.log(e)
      e.preventDefault()
    })
    this.$nextTick(() => {
      this.initSwiper();
    });
    let immersed = 0;
    let ms = /Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi.exec(
      navigator.userAgent
    );
    if (ms && ms.length >= 3) {
      // 当前环境为沉浸式状态栏模式
      immersed = parseFloat(ms[2]); // 获取状态栏的高度
    }
    console.log("immersed:", immersed);
    this.statusBarHeight = immersed + "px";
    
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  overflow: hidden;
}
.title {
  position: fixed;
  z-index: 1111;
  width: 100%;
  background-color: aqua;
  top: 0;
  left: 0;
  font-size: 1.6rem;
}
.btn {
  width: 100rem;
  height: 60rem;
}
.swiper {
  width: 500px;
  height: 260px;
  border: 1px solid #ccc;
  margin: 100px auto;
  position: relative;
}
.swiper-box {
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
  display: flex;
  transition: all 0.3s;
}
.swiper-item {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  font-size: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 50px;
  border: 1px solid #ccc;
  line-height: 50px;
}
.right {
  right: 0;
}
</style>
